import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    Dimensions,
    TouchableOpacity
} from 'react-native';
import Swiper from 'react-native-swiper';
export default class Application extends Component {
    static navigationOptions = {
        title: '应用',
    };
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View style={styles.container}>
                <View style={styles.title}>
                    <View style={styles.logo}>
                        <Image style={{width:30,height:30}} source={require('../images/dianxinlogo.png')}/>
                    </View>
                    <View style={{flex:5}}>
                        <Text style={[styles.text,styles.txt_fl]}>
                            应用
                        </Text>
                    </View>
                </View>             
            <ScrollView style={styles.sv}>
                <Swiper height={200} loop={true} autoplay={true}>
                    <View style={styles.slide}>
                        <Image style={styles.slide_img} source={require('../images/banner1.png')}/> 
                    </View>
                    <View style={styles.slide}>
                        <Image style={styles.slide_img} source={require('../images/banner2.png')}/>
                    </View>
                    <View style={styles.slide}>
                        <Image style={styles.slide_img} source={require('../images/banner3.png')}/>
                    </View>
                </Swiper>
                <View style={styles.component}>
                    <Image style={styles.component_img} source={require('../images/part1.png')}/>
                    <Text style={styles.app_intro_t}>
                        智慧城市
                    </Text>
                    <Text style={styles.app_intro_b}>
                        实现城市智慧式管理和运行
                    </Text>
                </View>
                <View style={styles.component}>
                    <Image style={styles.component_img} source={require('../images/part2.png')}/>
                    <Text style={styles.app_intro_t}>
                        AI语音
                    </Text>
                    <Text style={styles.app_intro_b}>
                        为智能语音生态和区块链生态提供基础设施
                    </Text>
                </View>
                <View style={[styles.component,styles.marginBottom]}>
                    <Image style={styles.component_img} source={require('../images/part3.png')}/>
                    <Text style={styles.app_intro_t}>
                        其他应用
                    </Text>
                    <Text style={styles.app_intro_b}>
                        更多精彩应用等待您
                    </Text>
                </View>
            </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    title: {
        flexDirection:'row',
        backgroundColor: '#303f9f',
        justifyContent: 'flex-start',
        height:50,
    },
    logo:{
        flex:1,
        justifyContent:'center',
        height:50,
        marginLeft:20,
    },
    text: {
        fontSize: 20,
        // fontWeight:'bold',
        color:'#F5FCFF',
        textAlign: 'center',
        lineHeight:50,
    },
    txt_fl:{
        textAlign:'left',
    },

    wrapper: {
        
    },
    slide: {
        height:200,
        justifyContent: 'center',
        alignItems: 'center',
    },
    slide_img:{
        width:Dimensions.get('window').width,
        height:200
    },
    marginBottom:{
        marginBottom:25
    },
    sv:{
        // backgroundColor: '#5164cc',
    },
    component:{
        marginLeft:20,
        marginRight:20,
        marginTop:25,
        height:160,
        backgroundColor: '#F5FCFF',
        borderRadius:10,
        overflow:'hidden',
        shadowOffset: {width: 0, height: 20},  
        shadowOpacity: 2.5,  
        shadowRadius: 15,  
        //注意：这一句是可以让安卓拥有灰色阴影  
        elevation: 4,  
        // zIndex: Global.isIOS() ? 1 : 0  
    },
    component_img:{
        height:100,
        resizeMode:'cover',
        width:Dimensions.get('window').width-40
    },
    app_intro_t:{
        marginLeft:20,
        marginTop:10,
        height:20,
        fontSize:18,
        color:'#4e4e4e',
        lineHeight:20,
    },
    app_intro_b:{
        marginLeft:20,
        marginBottom:10,
        height:20,
        fontSize:13,
        color:'#9d9d9d',
        lineHeight:20
    },
});